<!-- 邀请收益 -->
<template>
	<div class="award flex flex-v flex-align-center" :class="[backImgClass]">
		<div class="invite-award-btn">
			<img :src="imgUrl+'vip/invite-btn-new.png'" alt @click="invitationPoster" />
		</div>
		<div class="rank-container">
			<div v-for="(item, index) in list.data" :key="index" class="rank-item flex flex-pack-justify flex-align-center" :class="'rank-item'+index">
				<span class="rank-user">{{item.user_name | formatName}}</span>
				<span class="rank-tel">{{item.mobile_phone}}</span>
				<span class="rank-status" :class="{'green':item.vip_condition==1}">{{item.vip_condition==1 ? '已开通' : '未开通'}}</span>
			</div>
			<div v-if="list.finished" class="noMore">没有更多了</div>
		</div>

		<!-- 分享弹窗 -->
		<v-sharePoster ref="sharePoster" :type="6"></v-sharePoster>
	</div>
</template>

<script>
import { list } from '@/mixins'
import sharePoster from '@/pages/components/sharePoster'
import { mapState, mapGetters } from 'vuex'
import { getSpreadIndex } from '@/utils/common'
import { getJuniorList } from '@/api/getGuest'

export default {
	name: 'inviteShop',
	mixins: [list],
	components: {
		'v-sharePoster': sharePoster
	},
	data() {
		return {
			imgUrl: this.$constant.imgUrl,
			backImgClass: `award-new`
		}
	},
	filters: {
		formatName(name) {
			if (name.length >= 7) {
				return name.substr(0, 7) + '...'
			}
			return name
		}
	},
	computed: {
		...mapState({
			user_id: state => state.user.user.user_id
		}),
		...mapGetters({ userInfo: 'getUser' })
	},

	mounted() {
		// this.shareWeixin()
	},
	onLoad() {
		this.getList()
	},
	// 加载更多
	onReachBottom() {
		if (this.list.loading) {
			return
		}
		if (this.list.data.length < this.list.total) {
			this.getList()
		}
	},
	methods: {
		getList() {
			let params = {
				page: this.list.page,
				limit: this.list.limit
			}
			return getJuniorList(params).then(res => {
				if (res.status == 'success') {
					uni.stopPullDownRefresh()
					this.completes(res)
				}
			})
		},
		shareWeixin() {
			let userInfo = this.$store.getters.getUser
			let owner_user_id = this.$route.query.owner_user_id
			let puser_id = this.$route.query.share_user_id
			let obj = {
				title: userInfo.nick_name + '邀请你一起开店创业', // 分享标题
				desc: '20秒注册开启您的专属获客神器', // 分享内容
				linkurl: userInfo.invite_register_hkds_url, // 分享链接
				img: userInfo.user_picture // 分享内容显示的图片
			}
		},
		invitationPoster() {
			this.$refs.sharePoster.showMask()
		},
		toMaterialList() {
			uni.navigateTo({
				url: `/pages/getGuest/shareList?from=inviteShop`
			})
		}
	},
	// 微信分享
	onShareAppMessage: function(options) {
		let url = getSpreadIndex()
		let _endUrl = '?owner_user_id=' + this.userInfo.user_id + '&f=poster'
		const shareObj = {
			title: this.userInfo.nick_name + '邀请你一起开店创业',
			path: `/pages/page/login/index${_endUrl}&share_user_id=${this.userInfo.user_id}`
		}
		return shareObj
	}
}
</script>
<style lang='scss' scoped>
	.award-new {
		background-image: url($imgUrl+'vip/invite-award-bg-new.png') !important;
	}
	.award {
		width: 100%;
		background: #AF1A30;
		background-size: 100% 1235px;
		background-repeat: no-repeat;
		padding-bottom:117rpx;
		.invite-award-btn {
			width: 642px;
			height: 217px;
			margin: 644px 0 415px;
			img {
				width: 100%;
				height: 217px;
			}
		}
		.rank-container {
			width: 590px;
			padding:0 40px;
			height: 100%;
			overflow: auto;
			background:rgba(255,255,255,1);
			box-shadow:inset 0px 0px 10px 0px rgba(171,26,52,0.74);
			border-radius:20px;
			.rank-item {
				width: 590px;
				height: 68px;
				padding: 21px 0;
				line-height:58px;
				box-shadow:0px 1px 0px 0px rgba(221,221,221,1);
				font-size: 30px;
			}
			.rank-user {
				color: #333333;
			}
			.rank-tel {
				color: #666;
			}
			.rank-status {
				color: #ff6900;
				&.green{
					color:#10B214;
				}
			}
		}
	}
</style>
